import React from 'react';
import {
  Modal,
  Row,
  Col,
  Tag,
  Rate,
  Progress,
  Card,
  Button,
} from 'antd';
import {
  CustomerServiceOutlined,
  PlayCircleOutlined,
} from '@ant-design/icons';

const SongDetailModal = ({
  visible,
  onCancel,
  onEdit,
  onPractice,
  selectedSong,
}) => {
  const getDifficultyText = (difficulty) => {
    switch (difficulty) {
      case 1: return '简单';
      case 2: return '较简单';
      case 3: return '中等';
      case 4: return '较困难';
      case 5: return '困难';
      default: return '未知';
    }
  };

  return (
    <Modal
      title={selectedSong?.name}
      visible={visible}
      onCancel={onCancel}
      footer={[
        <Button key="back" onClick={onCancel}>
          关闭
        </Button>,
        <Button 
          key="practice" 
          type="primary" 
          icon={<PlayCircleOutlined />}
          onClick={() => {
            onCancel();
            onPractice(selectedSong);
          }}
        >
          开始练习
        </Button>,
        <Button 
          key="edit" 
          onClick={() => {
            onCancel();
            onEdit(selectedSong);
          }}
        >
          编辑歌曲
        </Button>,
      ]}
      width={600}
    >
      {selectedSong && (
        <div>
          <Row gutter={[16, 16]}>
            <Col span={12}>
              <Card title="基本信息" size="small">
                <p><strong>艺术家：</strong> {selectedSong.artist}</p>
                <p><strong>分类：</strong> <Tag color="blue">{selectedSong.category}</Tag></p>
                <p><strong>难度：</strong> 
                  <Rate disabled defaultValue={selectedSong.difficulty} style={{ marginLeft: 8 }} />
                  <span style={{ marginLeft: 8, color: '#666' }}>
                    {getDifficultyText(selectedSong.difficulty)}
                  </span>
                </p>
              </Card>
            </Col>
            <Col span={12}>
              <Card title="练习统计" size="small">
                <p><strong>练习次数：</strong> <Tag color="green">{selectedSong.practiceCount} 次</Tag></p>
                <p><strong>掌握程度：</strong></p>
                <Progress 
                  percent={selectedSong.mastery} 
                  size="small" 
                  status={selectedSong.mastery >= 90 ? 'success' : 'active'}
                />
                <p style={{ fontSize: 12, color: '#666', marginTop: 4 }}>
                  {selectedSong.mastery}%
                </p>
                <p><strong>最后练习：</strong> {selectedSong.lastPractice}</p>
              </Card>
            </Col>
          </Row>
          {selectedSong.notes && (
            <Card title="练习备注" size="small" style={{ marginTop: 16 }}>
              <p style={{ background: '#f5f5f5', padding: 8, borderRadius: 4, margin: 0 }}>
                {selectedSong.notes}
              </p>
            </Card>
          )}
        </div>
      )}
    </Modal>
  );
};

export default SongDetailModal; 